<template>
    <div class="NewMusicCom">
        <h1>
            <router-link :to="{name:'NewMusic'}">
                最新音乐
                <i class="fa fa-chevron-right"></i>
            </router-link>
        </h1>
        <article>
            <div class="NewMusic" v-for="{album,artists,name,alias,item} in NewMusic" :key="item">
                <div class="img">
                    <img :src="album.blurPicUrl">
                    <i class="fa fa-play"></i>
                </div>
                <div class="info">
                    <p>
                        <a class="MusicTitle">{{name}}</a>
                        <a class="MoreInfo">{{alias[0]}}</a>
                    </p>
                    <p>
                        <span class="tag">
                            <i>SQ</i>
                            <i>MV</i>
                        </span>
                        <span>
                            <a class="author" v-for="{name,item} in artists" :key="item">{{name}}</a>
                        </span>
                    </p>
                </div>
            </div>
        </article>
    </div>
</template>

<script>
import {NewMusic} from '@/library/api/api'
export default {
    name:'NewMusicCom',
    data() {
        return {
            NewMusic:{}
        }
    },
    created() {
        NewMusic({}).then(res=>{
            this.NewMusic = res.data.map(item=>{
                return item
            })
            this.NewMusic.length = 12
        })
    }
}
</script>

<style lang="scss" scoped>
@import './NewMusicCom.scss'
</style>
